<template>
    <div class="bg">
        <ul class="container">
            <li class="img-item" v-for="(item, index) in  state.inoutList">
                <el-image style="width: 150px; height: 150px" class="image-show"
                    :preview-src-list="[`${env}/static/logphoto/${item.devCode}-${moment(item.eventStamp).format('YYYYMMDDHHmmss')}-${item.employeeCode}.jpg`]"
                    :src="`${env}/static/logphoto/${item.devCode}-${moment(item.eventStamp).format('YYYYMMDDHHmmss')}-${item.employeeCode}.jpg`">
                    <template #error>
                        <div class="image-slot">
                            暂无图片
                        </div>
                    </template>
                </el-image>
                <div class="p-info">
                    <span>工号:{{ item.employeeCode }}</span>
                    <span>姓名:{{ item.employee.name }}</span>
                    <span>时间:{{ moment(item.eventStamp).format('YYYY-MM-DD HH:mm:ss') }}</span>
                </div>
            </li>
        </ul>
        <div class="table-content">
            <table>
                <thead>
                    <tr>
                        <th>工号</th>
                        <th>姓名</th>
                        <th>刷卡时间</th>
                        <th>部门信息</th>
                        <th>钉钉相关原始数据</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for=" i in state.inoutList">
                        <td>{{ i.employeeCode }}</td>
                        <td>{{ i.employee.name }}</td>
                        <td>{{ moment(i.eventStamp).format('YYYY-MM-DD HH:mm:ss') }}</td>
                        <td>
                            <el-tag v-for="ii in roleList(i.employee.remark).result.role_list">
                                {{ ii.name }}
                            </el-tag>
                        </td>
                        <td>{{ i.employee.remark }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import moment from 'moment';

const env = import.meta.env.VITE_API_URL.replace('/api', '')

const state = reactive(
    {
        inoutList: [] as any[],
        pagenation: {
            total: 0,
            pageNum: 1,
            pageSize: 10,
            code: '',
            name: '',
            roleCode: '',
            Codes: [] as any[],
            startOn: moment(new Date()).add(-24 * 30 * 3600 * 1000).format('YYYY-MM-DD'),
            endOn: moment(new Date()).format('YYYY-MM-DD'),
        },
    }
)
let currentIndex = ref(0)

const count = ref(0)
const timeR = setInterval(() => {
    getData()
}, 1000);

const roleList = (str: string) => {
    let a = JSON.parse(str)
    return a
}

const getData = () => {

}

</script>

<style lang="scss" scoped>
.bg {
    width: 100%;
    height: 100vh;
    background: url('/@/assets/background.png');
    color: #fff;
    font-size: 16px;
    -webkit-user-select: none;
    user-select: none;
}

.el-image {
    -webkit-user-drag: none;
}

ul,
li {
    list-style: none;
    padding: 0;
}

.container {
    width: 95%;
    position: relative;
    top: 5%;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    overflow-y: scroll;

    .img-item {
        height: 100%;
        padding: 5px;
        cursor: pointer;
        border-radius: 6px;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border: 1px solid skyblue;
        box-sizing: border-box;
        margin-right: 5px;
        margin-right: 5px;
        margin-bottom: 10px;

        .p-info {
            margin-top: 5px;

            span {
                display: block;
                width: 100%;
                font-size: 14px;
            }
        }
    }
}


.table-content {
    width: 95%;
    height: 300px;
    margin: auto;
    position: fixed;
    bottom: 6%;
    left: 2.5%;

    table {
        border-collapse: collapse;
        border-spacing: 0;
        width: 100%;
        text-align: center;
        height: 100px;

        thead {
            color: #fff;
            width: calc(100% - 1em);
        }

        tbody {
            overflow-y: scroll;
            height: 300px;
            width: 100%;
            display: block;
            border-right: 1px solid #eee;
        }

        thead,
        tbody tr {
            display: table;
            width: 100%;
            table-layout: fixed;
        }

        td {
            font-size: 14px;
            color: #fff !important;
        }

        th,
        td {
            padding: 5px;
            color: red;
            border: 1px solid #eee;

        }
    }
}

::-webkit-scrollbar {
    display: none;
}
</style>